<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/china.js"></script>
</head>
<body>
    <div id="map" style="width:1024px; height:800px;"></div>
    <script>
        $(
            function () {
                var chart = echarts.init(document.getElementById('map'), 'white', {renderer: 'canvas'});
                $.ajax({
                    type: "GET",
                    url: "http://127.0.0.1:5000/mapChart",
                    dataType: 'json',
                    success: function (result) {
                        chart.setOption(result);
                    }
                });
            }
        )

    </script>



    <div id="ConfNewLine" style="width:1024px; height:600px;"></div>
    <script>
        $(
            function () {
                var chart = echarts.init(document.getElementById('ConfNewLine'), 'white', {renderer: 'canvas'});
                $.ajax({
                    type: "GET",
                    url: "http://127.0.0.1:5000/confChart",
                    dataType: 'json',
                    success: function (result) {
                        chart.setOption(result);
                    }
                });
            }
        )

    </script>


    <div id="ConfTotalLine" style="width:1024px; height:600px;"></div>
    <script>
        $(
            function () {
                var chart = echarts.init(document.getElementById('ConfTotalLine'), 'white', {renderer: 'canvas'});
                $.ajax({
                    type: "GET",
                    url: "http://127.0.0.1:5000/confTotalChart",
                    dataType: 'json',
                    success: function (result) {
                        chart.setOption(result);
                    }
                });
            }
        )

    </script>


    <div id="DeadTotalLine" style="width:1024px; height:600px;"></div>
    <script>
        $(
            function () {
                var chart = echarts.init(document.getElementById('DeadTotalLine'), 'white', {renderer: 'canvas'});
                $.ajax({
                    type: "GET",
                    url: "http://127.0.0.1:5000/deadTotalChart",
                    dataType: 'json',
                    success: function (result) {
                        chart.setOption(result);
                    }
                });
            }
        )

    </script>

    <div id="divtable" class="chart-container" style="">
        <p class="title" style="">全国疫情数据分布</p>
        <table class="fl-table">
            <tr>
                <th>地区</th>
                <th>确诊</th>
                <th>死亡</th>
                <th>治愈</th>
            </tr>
            {% for i in content %}
            <tr>
                {% for j in i %}
                    <td>{{ j }}</td>
                {% endfor %}
            </tr>
            {% endfor %}
        </table>
    </div>


    <!-- 实时疫情概览 -->
    <div class="divcard">
        <h6 style="color:black;text-align:left;">实时疫情数据概览</h6>
        <table border="0" style="width:1000px; height:110px">
            <tr>
                <td>
                    <div class="card text-conter" style="width:250px; height:100px;">
                        <div class="card-header">确诊病例</div>
                        <div class="card-body" style="background-color:#FFE0E0">
                            <h class="card-title">{{ curnuber.conf }}</h>
                        </div>
                    </div>

                </td>
                <td>
                    <div class="card text-conter" style="width:250px; height:100px;">
                        <div class="card-header">疑似病例</div>
                        <div class="card-body" style="background-color:#FFE0E0">
                            <h class="card-title">{{ curnuber.conf }}</h>
                        </div>
                    </div>

                </td>
                <td>
                    <div class="card text-conter" style="width:250px; height:100px;">
                        <div class="card-header">死亡病例</div>
                        <div class="card-body" style="background-color:#FFE0E0">
                            <h class="card-title">{{ curnuber.conf }}</h>
                        </div>
                    </div>

                </td>
                <td>
                    <div class="card text-conter" style="width:250px; height:100px;">
                        <div class="card-header">治愈病例</div>
                        <div class="card-body" style="background-color:#FFE0E0">
                            <h class="card-title">{{ curnuber.conf }}</h>
                        </div>
                    </div>

                </td>
            </tr>
        </table>
    </div>
</body>
</html>